<template>
  <view class="bd t1 flex">
    <view class="s-list">
      <view
        style="position: relative"
        class="s-item"
        v-for="(v, index) in list"
        :key="index"
      >
        <view style="font-size: 34upx; font-weight: 900; padding: 10upx 0">{{
          v.title
        }}</view>
        <video
          :controls="kj"
          :src="v.imgUrl"
          mode="scaleToFill"
          :poster="v.content"
          style="width: 100%; height: 400upx; border-radius: 20rpx"
          @pause="addreadNum(v.id)"
          @ended="addreadNum(v.id)"
        ></video>
        <view class="flex u-row-left u-m-t-40">
          <view style="color: #6c6c6c; font-size: 12px"
            >{{ v.readNum }}浏览 · {{ v.enshrineNum }}分享</view
          >
          <ul class="icons" style="zoom: 0.4">
            <li @click="sharewx(v.id)">
              <u-icon
                size="90"
                color="#00D86D"
                name="weixin-circle-fill"
              ></u-icon>
            </li>
            <li @click="sharewQzone(v.id)">
              <u-icon
                size="90"
                color="#37E8B8"
                name="moments-circel-fill"
              ></u-icon>
            </li>

            <li v-show="!v.flag == 1">
              <u-icon
                size="90"
                color="#F8CB4F"
                name="star"
                @click="shares(v.id)"
              ></u-icon>
            </li>

            <li v-show="v.flag == 1" style="position: relative">
              <u-icon
                size="90"
                color="#F8CB4F"
                name="star-fill"
                @click="unenshrine(v.id)"
              ></u-icon>
              <u-badge
                type="error"
                :count="v.scNum"
                class="counts"
                style="position: absolute; top: -2px; left: 42px; width: 16px"
              ></u-badge>
            </li>
          </ul>
        </view>
        <view class="u-border-top u-m-t-10"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "", //文章的id
      show: false,
      iconshow: false,
      usersave: "",
      img: "../../../../static/img/zxun.png", //分享的image图片
      title: "",
      listid: "",
      page: {},
      list: [],
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getInjectPlanMore(this.page.pageNum + 1);
  },
  onReady() {
    // this.getUiStyle();
  },
  mounted() {
    plus.video.controls = false;
  },
  methods: {
    //展开分享
    //  share(id,title,img) {
    //   this.id = id
    //    this.show = true;
    // this.img = img
    // this.title = title
    //  },
    //微信分享
    sharewx(a) {
      this.id = a.id;
      this.show = true;
      this.img = a.content;
      this.title = a.title;
      //分享给微信好友
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "https://linehealth.cn/share1?id=" + a.id + "&type=" + 1,
        // href: "https://linehealth.cn/share1?id=" + a.id + "&type=" + 2,
        // href: "http://39.98.118.19:8096/share1?id=" + this.id + "&type=" + 2,
        title: this.title,
        summary: this.title,
        imageUrl: this.img,
      });
      this.addshareNum(a.id);
    },
    sharewQzone(a) {
      this.id = a.id;
      this.show = true;
      this.img = a.content;
      this.title = a.title;
      //分享给微信朋友圈
      uni.share({
        provider: "weixin",
        scene: "WXSenceTimeline",
        type: 0,
        href: "https://linehealth.cn/share1?id=" + a.id + "&type=" + 1,
        // href: "https://linehealth.cn/share1?id=" + a.id + "&type=" + 2,
        // href: "http://39.98.118.19:8096/share1?id=" + this.id + "&type=" + 2,
        title: this.title,
        summary: this.title,
        imageUrl: this.img,
      });
      this.addshareNum(a.id);
    },
    addreadNum(id) {
      this.kj = true;
      this.config
        .post("/messageEnshrine/setReadNum", {
          messageId: id,
          type: 2,
        })
        .then((res) => {
          this.getInjectPlan();
        });
    },
    addshareNum(id) {
      this.id = id;
      //增加分享数
      this.config
        .post("/messageEnshrine/setShareNum", {
          messageId: this.id,
          type: 2,
        })
        .then((res) => {});
    },
    shares(id) {
      console.log(id);
      this.id = id;
      this.config
        .post("/messageEnshrine/enshrineMessage", {
          messageId: this.id,
          type: 2,
        })
        .then((res) => {
          this.usersave = res.data.data;
          this.enshrine(id);
          this.enshrinecount(id);
        });
      this.getInjectPlan();

      this.show = false;
      setTimeout((s) => {
        uni.showToast({
          title: "收藏成功",
        });
      }, 500);
    },
    enshrine(id) {
      this.id = id;
      this.listid = id;
      //收藏
      this.config
        .get("/messageEnshrine/getEnshrine", {
          messageId: this.id,
          type: 2,
        })
        .then((res) => {
          if (res.data.data == 1) {
            this.iconshow = true;
          } else {
            this.iconshow = false;
          }
        });
    },
    enshrinecount(id) {
      this.id = id;
      this.config
        .get("/messageEnshrine/getMessageEnshrineNum", {
          messageId: this.id,
          type: 2,
        })
        .then((res) => {
          // console.log(res)
          this.usersave = res.data.data;
        });
    },
    unenshrine(id) {
      this.id = id;
      this.config
        .post("/messageEnshrine/qxEnshrineMessage", {
          messageId: this.id,
          type: 2,
        })
        .then((res) => {
          this.getInjectPlan();
          this.show = false;
          setTimeout((s) => {
            uni.showToast({
              title: "取消成功",
            });
          }, 500);
        });
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    // 获取接种计划
    getInjectPlan(pageNumber) {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/proposal/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          console.log(res.data.data.list);
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = res.data.data.list;
            let titles = res.data.data.list.title;
            if (titles.length >= 15) {
              this.title = titles.substring(0, 15) + "...";
            } else {
              this.title = titles;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getInjectPlanMore(pageNumber) {
      let self = this;
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/proposal/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = self.list.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 详情
    //  goDetail(v) {
    //    console.log(v);
    // this.id = v
    //    // uni.navigateTo({
    //    //   url:
    //    //     "/pages/main/child/backlog/suggest-detail?id=" +
    //    //     v.id +
    //    //     "&title=" +
    //    //     v.title +
    //    //     "&imgs" +
    //    //     v.imgUrl,
    //    // });
    //  },
  },
  mounted() {
    this.getInjectPlan();
  },
};
</script>

<style lang="less" scoped>
.s-list {
  padding: 30upx;
  width: 100%;
  .s-item {
    margin: 0 0 30upx;
  }
}
ul.icons {
  list-style: none;
  height: 120rpx;
  position: absolute;
  right: 0;
  bottom: 0;

  li {
    width: 60px;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    color: #535353;
    margin: 20rpx 50rpx 20rpx 0;
  }
}

.counts {
  float: left;
  margin-right: 180rpx;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  page {
    background-color: #1b1c1e !important;
  }
  .bd {
    background-color: #1b1c1e !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
@media (prefers-color-scheme: light) {
  page {
    background-color: #f7f7f7;
  }
}
</style>